<template>
  <div class="tabbar-container flex_space_between v-cloak fadeInUp">
    <div class="tabbar_left tabbar_item flex_space_between">
      <div :class="[tab == 0 ? 'project-color':'']"
           hover-class='none'
           @click='navigator(0)'>
        <img :src="tab == 0 ? list[0].selectedIconPath : list[0].iconPath"
             alt="">
        <p> {{ list[0].text }} </p>
      </div>
      <div :class="[tab == 1 ? 'project-color':'']"
           :url="list[1].pagePath"
           hover-class='none'
           @click='navigator(1)'>
        <img :src="tab == 1 ? list[1].selectedIconPath : list[1].iconPath"
             alt="">
        <p> {{ list[1].text }} </p>
      </div>
    </div>
    <div class="tabbar_right tabbar_item flex_space_between">
      <div :class="[tab == 2 ? 'project-color':'']"
           :url="list[2].pagePath"
           hover-class='none'
           @click='navigator(2)'>
        <img :src="tab == 2 ? list[2].selectedIconPath : list[2].iconPath"
             alt="">
        <!-- 未读消息 -->
        <i class="i_con">{{ num }}</i>
        <p> {{ list[2].text }} </p>
      </div>
      <div :class="[tab == 3 ? 'project-color':'']"
           :url="list[3].pagePath"
           hover-class='none'
           @click='navigator(3)'>
        <img :src="tab == 3 ? list[3].selectedIconPath : list[3].iconPath"
             alt="">
        <p> {{ list[3].text }} </p>
      </div>
    </div>
    <div class="release"
         hover-class='none'
         @click='navigator(4)'>
      <div :url="releasePath">发布</div>
    </div>

  </div>
</template>

<script>
import { mapActions } from 'vuex'
import store from '@/store'
export default {
  props: ['list', 'tab'],
  data () {
    return {
      releasePath: '/pages/release/main',
      phone: '110',
      num: this.$store.state.unread_news
    }
  },
  methods: {
    navigator (tab) {
      // console.log(url)
      if (tab === 4) {
        wx.navigateTo({
          url: this.releasePath
        })
        return false
      }
      if (store.state.tab_ === tab) return false
      console.log(store.state.tab_)
      this.urlBack(tab)
    },
    call (phone) {
      wx.makePhoneCall({
        phoneNumber: phone
      })
    },
    ...mapActions([
      'urlBack'
    ])
  },
  onLoad () {
    console.log(this.$store.state.unread_news)
  }
}
</script>

<style lang='scss' scoped>
.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0 70rpx;
  width: 100%;
  height: 99rpx;
  box-shadow: 0 -1rpx 10rpx 4rpx rgba(0, 0, 0, 0.08);
  background: #fff;
  font-size: 32rpx;
  color: #c5c5c5;
  .tabbar_item {
    width: 210rpx;
    & > div {
      position: relative;
      .i_con {
        position: absolute;
        right: 5rpx;
        display: inline-block;
        margin-top: -5rpx;
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        font-size: 20rpx;
        background: #e55757;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
    div {
      padding-top: 10rpx;
      padding: 10rpx 20rpx 0;
      display: block;
      font-size: 26rpx;
      text-align: center;

      p {
        line-height: 1em;
      }
    }
    img {
      width: 45rpx;
      height: 40rpx;
    }
  }
  .release {
    position: absolute;
    bottom: 15rpx;
    left: 50%;
    margin-left: -70rpx;
    width: 140rpx;
    height: 140rpx;
    line-height: 140rpx;
    text-align: center;
    color: #fff;
    background: #56bafe;
    box-shadow: 0 0 10rpx 2rpx rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    a {
      display: block;
    }
  }
  .phone_call {
    position: absolute;
    right: 30rpx;
    top: -160rpx;
    width: 85rpx;
    height: 80rpx;
    padding: 20rpx;
    background: #56bafe;
    border-radius: 50%;
    img {
      width: 45rpx;
      height: 40rpx;
    }
  }
}
</style>